<template>
  <div class="app-container home compact-view">
    <!-- 顶部标题区 -->
    <div class="header-section">
      <h1 class="platform-title">
        <i class="el-icon-s-management"></i> 义务教育信息科技课程平台
      </h1>
      <div class="platform-subtitle">
        培养数字时代创新人才 · 助力教育现代化发展
        <el-tag type="success" size="small">当前版本: v3.6.6</el-tag>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="main-content">
      <!-- 平台介绍 -->
      <el-row :gutter="16" class="intro-row">
        <el-col :span="24">
          <el-card class="intro-card">
            <h2><i class="el-icon-info"></i> 平台简介</h2>
            <p>本平台是根据《义务教育信息科技课程标准(2022年版)》要求开发的专业教学辅助系统，为全国中小学提供优质的信息科技课程资源和实践环境。</p>

            <el-row :gutter="16" class="feature-grid">
              <el-col :xs="24" :sm="12" :md="8" v-for="(feature, index) in features" :key="index">
                <div class="feature-item">
                  <div class="feature-icon" :style="{backgroundColor: feature.color}">
                    <i :class="feature.icon"></i>
                  </div>
                  <h3>{{ feature.title }}</h3>
                  <p>{{ feature.desc }}</p>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>

      <!-- 课程体系 -->
      <el-row :gutter="16" class="curriculum-row">
        <el-col :span="24">
          <el-card class="curriculum-card">
            <h2><i class="el-icon-notebook-2"></i> 核心课程模块</h2>
            <el-row :gutter="16">
              <el-col :xs="24" :sm="12" :md="8" v-for="(course, index) in curriculum" :key="index">
                <div class="course-item">
                  <div class="course-badge" :style="{backgroundColor: course.color}">
                    {{ course.grade }}
                  </div>
                  <h3>{{ course.title }}</h3>
                  <p>{{ course.desc }}</p>
                  <div class="course-tags">
                    <el-tag size="mini" :type="tagTypes[index % tagTypes.length]"
                            v-for="(tag, i) in course.tags" :key="i">
                      {{ tag }}
                    </el-tag>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>

      <!-- 联系信息 -->
      <el-row :gutter="16" class="contact-row">
        <el-col :span="24">
          <el-card class="contact-card">
            <h2><i class="el-icon-service"></i> 联系我们</h2>
            <el-row :gutter="20">
              <el-col :sm="12">
                <div class="contact-method">
                  <i class="el-icon-link"></i>
                  <div>
                    <h3>官方网站</h3>
                    <p>www.edu-tech.cn</p>
                  </div>
                </div>
              </el-col>
              <el-col :sm="12">
                <div class="contact-method">
                  <i class="el-icon-phone"></i>
                  <div>
                    <h3>服务热线</h3>
                    <p>400-123-4567</p>
                  </div>
                </div>
              </el-col>
              <el-col :sm="12">
                <div class="contact-method">
                  <i class="el-icon-message"></i>
                  <div>
                    <h3>电子邮箱</h3>
                    <p>support@edu-tech.cn</p>
                  </div>
                </div>
              </el-col>
              <el-col :sm="12">
                <div class="contact-method">
                  <i class="el-icon-qq"></i>
                  <div>
                    <h3>QQ交流群</h3>
                    <p>158753145</p>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
const features = [
  {
    title: '标准符合',
    desc: '完全符合国家义务教育课程标准要求',
    icon: 'el-icon-document-checked',
    color: '#409EFF'
  },
  {
    title: '全面覆盖',
    desc: '覆盖3-9年级全学段教学内容',
    icon: 'el-icon-collection',
    color: '#67C23A'
  },
  {
    title: '仿真实验',
    desc: '200+个互动式仿真实验场景',
    icon: 'el-icon-cpu',
    color: '#E6A23C'
  },
  {
    title: '编程实践',
    desc: '支持Python、Scratch等编程实践',
    icon: 'el-icon-data-line',
    color: '#F56C6C'
  },
  {
    title: '智能教学',
    desc: '人工智能与物联网基础教学模块',
    icon: 'el-icon-aim',
    color: '#B37FEB'
  },
  {
    title: '数据分析',
    desc: '学习行为分析与个性化推荐',
    icon: 'el-icon-pie-chart',
    color: '#909399'
  }
]

const curriculum = [
  {
    title: '数字素养基础',
    desc: '计算机基础、网络应用、信息安全等',
    grade: '3-4年级',
    tags: ['基础模块', '40课时'],
    color: '#409EFF'
  },
  {
    title: '算法与编程',
    desc: '图形化编程与Python基础',
    grade: '5-6年级',
    tags: ['核心模块', '60课时'],
    color: '#67C23A'
  },
  {
    title: '人工智能',
    desc: '机器学习基础、智能应用体验',
    grade: '7-9年级',
    tags: ['拓展模块', '30课时'],
    color: '#E6A23C'
  },
  {
    title: '物联网',
    desc: '传感器应用、智能设备控制',
    grade: '8-9年级',
    tags: ['选修模块', '20课时'],
    color: '#F56C6C'
  },
  {
    title: '数据处理',
    desc: '数据采集、分析与可视化',
    grade: '7-9年级',
    tags: ['必修模块', '40课时'],
    color: '#B37FEB'
  },
  {
    title: '数字创作',
    desc: '多媒体作品创作、3D建模',
    grade: '5-9年级',
    tags: ['选修模块', '30课时'],
    color: '#909399'
  }
]

const tagTypes = ['', 'success', 'info', 'warning', 'danger']
</script>

<style scoped lang="scss">
.compact-view {
  padding: 15px;
  max-width: 1200px;
  margin: 0 auto;

  .header-section {
    text-align: center;
    margin-bottom: 20px;

    .platform-title {
      font-size: 1.8rem;
      color: #303133;
      margin-bottom: 10px;

      i {
        color: #409EFF;
        margin-right: 10px;
      }
    }

    .platform-subtitle {
      font-size: 1rem;
      color: #606266;
      margin-bottom: 15px;

      .el-tag {
        margin-left: 10px;
        vertical-align: middle;
      }
    }
  }

  .main-content {
    .intro-row,
    .curriculum-row,
    .contact-row {
      margin-bottom: 15px;
    }

    .intro-card,
    .curriculum-card,
    .contact-card {
      border-radius: 8px;

      h2 {
        font-size: 1.3rem;
        color: #303133;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ebeef5;

        i {
          margin-right: 10px;
          color: #409EFF;
        }
      }
    }

    .feature-grid {
      margin-top: 15px;

      .feature-item {
        text-align: center;
        padding: 15px;

        .feature-icon {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 10px;
          color: white;
          font-size: 1.5rem;
        }

        h3 {
          font-size: 1.1rem;
          margin: 10px 0;
          color: #303133;
        }

        p {
          font-size: 0.9rem;
          color: #606266;
          line-height: 1.5;
        }
      }
    }

    .course-item {
      padding: 15px;
      border-radius: 8px;
      background: #f9f9f9;
      height: 100%;
      position: relative;

      .course-badge {
        position: absolute;
        top: 0;
        right: 15px;
        padding: 3px 8px;
        border-radius: 0 0 4px 4px;
        color: white;
        font-size: 0.8rem;
      }

      h3 {
        font-size: 1.1rem;
        color: #303133;
        margin: 5px 0 10px;
      }

      p {
        font-size: 0.9rem;
        color: #606266;
        margin-bottom: 10px;
        line-height: 1.5;
      }

      .course-tags {
        margin-top: 10px;

        .el-tag {
          margin-right: 5px;
          margin-bottom: 5px;
        }
      }
    }

    .contact-card {
      .contact-method {
        display: flex;
        align-items: center;
        padding: 10px 0;

        i {
          font-size: 1.8rem;
          color: #409EFF;
          margin-right: 15px;
          width: 40px;
          text-align: center;
        }

        h3 {
          font-size: 1rem;
          color: #303133;
          margin: 0 0 5px;
        }

        p {
          font-size: 0.9rem;
          color: #606266;
          margin: 0;
        }
      }
    }
  }
}
</style>